import { useEffect, useState } from 'react';
import * as echarts from 'echarts';
import './index.less'
import { get_sickbed_list } from '@/services/bigdata';
import { Carousel, Tooltip } from 'antd';
import SickbedsInfo from './components/SickbedsInfo';
import classNames from 'classnames';
type EChartsOption = echarts.EChartsOption;
document.title = '家庭病床一览';
const FamilyBedScreen = () => {
    // 获取URL参数
    const getUrlParam = (name: string) => {
        const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
        const r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURIComponent(r[2]);
        }
        return null;
    };
    const token: string | null = getUrlParam('sign');
    const platformId: any = getUrlParam('platformId');

    var map = new Map();
    // 正式环境鉴湖驿站id为10的token
    map.set('10', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJsYXJnZV9zY3JlZW4tZjEyd2Q0dDQiLCJhdWQiOiJsaW1hb25pYW8iLCJqdGkiOiJlODJlNjE4NzM4OTRlOTA4ODY4ZjEyd2Q0dDQiLCJwbGF0Zm9ybV9pZCI6IjEwIn0.S6CNDV44XsCPStSyyY7H7rcEdXu3G4_QupMNo5DfUio');
    console.log('map', map.get(platformId));

    // 存储病床列表
    const [sickbedList, setSickbedList] = useState<any>([]);
    // 存储病床总数
    const [total_count, setTotal_count] = useState<number>();
    // 存储三色数据
    const [level_count, setLevel_count] = useState<any>({});
    // 存储详情模态框的状态
    const [isInfoModalOpen, setIsInfoModalOpen] = useState(false);
    // 存储当前项id
    const [id, setId] = useState<number>();
    // 存储轮播状态
    const [is_autoplay, setIs_autoplay] = useState(true)

    // 控制详情模态框的显示与隐藏
    const isShowInfoModal = (status: boolean) => {
        setIsInfoModalOpen(status)
        setIs_autoplay(!status)
    }


    // 页面初始化
    useEffect(() => {
        // 获取家庭病床列表
        const getData = async () => {
            if (token || map.get(platformId)) {
                let res: any = await get_sickbed_list(token ?? map.get(platformId), { pageSize: 200, current: 1 });
                console.log('家庭病床列表', res);
                if (res.code == 200) {
                    setSickbedList(splitArrayByNum(res.data.list, 24));
                    setTotal_count(res.data.total_count);
                    setLevel_count(res.data);


                    // 三色管理环状图
                    var chartDom = document.getElementById('three_color');
                    var myChart = echarts.init(chartDom);
                    var option: EChartsOption;
                    option = {
                        color: ['#F56262', '#FFF45C', '#3699FF'],
                        series: [
                            {
                                type: 'pie',
                                colorBy: 'data',
                                legendHoverLink: false,
                                itemStyle: {
                                    borderRadius: 2,
                                    borderColor: '#0c225d',
                                    borderWidth: 3,
                                },
                                right: 100,
                                // 占位圆
                                emptyCircleStyle: {
                                    borderColor: '#E4F9FB',
                                    borderType: [5, 10],
                                    borderDashOffset: 5
                                },
                                showEmptyCircle: true,
                                radius: ['70%', '90%'],
                                avoidLabelOverlap: true,
                                label: {
                                    show: false,
                                    position: 'center',
                                    fontWeight: 'lighter',
                                    fontStyle: "normal",
                                    backgroundColor: "transparent",
                                    color: "#94AFEA",
                                    // formatter: `{name|${res1.data.assessment.old_evaluation + res1.data.assessment.old_depressedsds + res1.data.assessment.old_kneewomac}}\n{value|总次数}`,
                                    rich: {
                                        name: {
                                            fontSize: 24,
                                            color: '#D4F0F9',
                                        },
                                        value: {
                                            fontSize: 14,
                                            color: '#94AFEA',
                                        }
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: 14,
                                        fontWeight: 'normal',
                                    }
                                },
                                data: [
                                    {
                                        name: '重点关注',
                                        value: res.data.level_red ? res.data.level_red : 0,
                                    },
                                    {
                                        name: '中等关注',
                                        value: res.data.level_yellow ? res.data.level_yellow : 0,
                                    },
                                    {
                                        name: '一般关注',
                                        value: res.data.level_blue ? res.data.level_blue : 0,
                                    },
                                ],
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            }
        }
        getData();
    }, [])


    // 根据指定的长度将数组分割为新数组
    const splitArrayByNum = (arr: any, num: number) => {
        var flag = 0;
        var _data = [];
        for (let i = 0; i < arr.length; i++) {
            if (i % num == 0 && i != 0) {
                _data.push(arr.slice(flag, i));
                console.log('111', num, i, _data);
                flag = i;
            }
            if ((i + 1) == arr.length) {
                _data.push(arr.slice(flag, (i + 1)));
            }
        }
        // console.log('_data',_data);
        return _data;
    }

    return <div className="box">
        {/* 标题 */}
        <div className='header'>
            <div className='title'>
                <span>家庭病床一览</span>
            </div>
        </div>
        {/* 内容 */}
        <div className='content'>
            {/* 左侧图表 */}
            <div className='left'>
                <div className='top'>
                    <div className='top_title'></div>
                    <div className='top_data'>
                        <div className='data_num'>
                            <div style={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)', top: '20%', color: '#D4F0F9', fontSize: '20px', fontWeight: 500, textShadow: '1px 3px 9px rgba(12,28,52,0.16)' }}>{total_count ?? total_count}</div>
                            <div style={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)', top: '60%', color: '#D4F0F9', fontSize: '14px', fontWeight: 500, textShadow: '1px 3px 9px rgba(12,28,52,0.16)' }}>总人数</div>
                        </div>
                    </div>
                </div>
                <div className='bottom'>
                    <div className='bottom_title'></div>
                    <div className='bottom_data'>
                        <div className='three_color' id='three_color'></div>
                        <div className='color_content'>
                            <div className='item'><div style={{ width: '12px', height: '12px', borderRadius: "50%", backgroundColor: '#F56262',marginRight:'20px' }}></div><div className='name'>重点关注</div><div className='number'>{level_count?.level_red}<span className='danwei'>人</span></div></div>
                            <div className='item'><div style={{ width: '12px', height: '12px', borderRadius: "50%", backgroundColor: '#FFF45C',marginRight:'20px' }}></div><div className='name'>中等关注</div><div className='number'>{level_count?.level_yellow}<span className='danwei'>人</span></div></div>
                            <div className='item'><div style={{ width: '12px', height: '12px', borderRadius: "50%", backgroundColor: '#3699FF',marginRight:'20px' }}></div><div className='name'>一般关注</div><div className='number'>{level_count?.level_blue}<span className='danwei'>人</span></div></div>
                        </div>
                    </div>
                </div>
            </div>
            {/* 右侧轮播列表 */}
            <div className='right'>
                <Carousel
                    autoplay={is_autoplay}
                    infinite
                    autoplaySpeed={5000}
                    effect="scrollx"
                    adaptiveHeight={true}
                    style={{
                        height: "100%"
                    }}
                >
                    {sickbedList.map((i: any, index: number) => {
                        return <div className='right_box' key={index}>
                            {i.map((item: any) => {
                                return (
                                    <div
                                        className='item'
                                        key={item.id}
                                        style={{ cursor: item.patient_name ? 'pointer' : '', }}
                                        onClick={() => {
                                            if (item.patient_name) {
                                                setId(item.id)
                                                isShowInfoModal(true)
                                            }
                                        }}>
                                        <div className='title'>
                                            <div style={{ color: '#01E9EB', fontSize: "18px", textAlign: 'center', width: '100%', height: '100%', paddingTop: '4px' }}>{item.code}</div>
                                            {item.level ?
                                                <div style={{
                                                    width: '20px', height: '20px', backgroundColor: item.level == 1 ? '#0062ff' : item.level == 2 ? '#f5dd1e' : '#F70A0A', borderRadius: '3px', marginRight: '13px', position: 'absolute', top: '50%',
                                                    transform: 'translateY(-50%)', right: '0'
                                                }}></div> : <></>
                                            }
                                        </div>
                                        <div className='item_content'>
                                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                                <div style={{ fontSize: '14px', color: '#94AFEA', flex: 1 }}>患者</div>
                                                {item.patient_name ?
                                                    <div style={{ display: 'flex', flex: 2, alignItems: "center", justifyContent: 'space-between', fontSize: '16px' }}>
                                                        <div style={{ marginRight: "5px", flex: 1, color: '#D4F0F9' }}>{item.patient_name}
                                                        </div>
                                                        <div style={{}}>
                                                            <img style={{ width: '18px', height: '18px' }} src={item.patient_sex == 1 ? '/man.png' : '/woman.png'} alt="" />
                                                        </div>
                                                    </div> : <div style={{ fontSize: '14px', color: '#D4F0F9' }}>--</div>
                                                }
                                            </div>
                                            <div style={{ display: 'flex', marginTop: "20px", alignItems: 'center' }}>
                                                <div style={{ fontSize: '14px', color: '#94AFEA', flex: 1 }}>医生</div>
                                                {item.bind_doctor.length > 0 ? <div style={{ flex: 2, color: '#D4F0F9', fontSize: '16px' }}>
                                                    <Tooltip title={item.bind_doctor.map((item: any) => item.username).join()}>
                                                        {item.bind_doctor.map((item: any) => item.username).join().length > 5
                                                            ? item.bind_doctor
                                                                .map((item: any) => item.username)
                                                                .join()
                                                                .substring(0, 5) + '...'
                                                            : item.bind_doctor.map((item: any) => item.username).join()}
                                                    </Tooltip>
                                                </div> : <div style={{ fontSize: '14px', color: '#D4F0F9' }}>--</div>}
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}

                        </div>
                    })}
                    {/* {sickbedList.map((i: any, index: number) => {
                        return <div className='right_box' key={index}>
                            <Row gutter={[16, 10]}>
                                {i.map((item: any) => {
                                    return <Col span={4} key={item.id}>
                                        <Card title={item.code} bordered={false} extra={item.level ? <Tag style={{ width: '20px', height: '20px', marginTop: '5px' }} color={item.level == 1 ? '#0062ff' : item.level == 2 ? '#f5dd1e' : '#F70A0A'}></Tag> : <></>} style={{
                                            borderRadius: '0',
                                            borderTop: item.patient_name && item.doctor_name ? '3px solid #0062FF' : '3px solid #DADDE5',
                                            cursor: item.patient_name ? 'pointer' : '',
                                        }}
                                            onClick={() => {
                                                if (item.patient_name) {
                                                    // setId(item.id)
                                                    // isShowInfoModal(true)
                                                }
                                            }}
                                        >
                                            <div style={{ display: 'flex', justifyContent: 'space-between', }}>
                                                <div style={{ fontSize: '14px', color: '#999999' }}>患者</div>
                                                <div>{item.patient_name ?
                                                    <div style={{ display: 'flex', alignItems: "center", }}>
                                                        <div style={{ marginRight: "5px" }}>{item.patient_name}</div>
                                                        <img style={{ width: '14px', height: '14px' }} src={item.patient_sex == 1 ? '/man.png' : '/woman.png'} alt="" />
                                                    </div> : <div style={{ fontSize: '14px', color: '#40444A' }}>--</div>}
                                                </div>
                                            </div>
                                            <div>
                                            </div>
                                            <div style={{ display: 'flex', justifyContent: 'space-between',  }}>
                                                <div style={{ fontSize: '14px', color: '#999999' }}>医生</div>
                                                {item.doctor_name ? <div>
                                                    {item.doctor_name}
                                                </div> : <div style={{ fontSize: '14px', color: '#40444A' }}>--</div>}
                                            </div>
                                        </Card>
                                    </Col>
                                })}</Row>

                        </div>
                    })} */}
                </Carousel>
            </div>
        </div>
        {/* 病床详情模态框 */}
        {isInfoModalOpen ? <SickbedsInfo isInfoModalOpen={isInfoModalOpen} isShowInfoModal={isShowInfoModal} id={id} token={token ?? map.get(platformId)}></SickbedsInfo> : ""}
    </div>
}
export default FamilyBedScreen;